<template>
<div >
  <el-row  style="margin-top: -410px">
    <el-col v-for="item in forms"  style="height: 70px;margin-top: 90px;width: 1000px;margin-left: 40px">
      <el-card style="margin-left: 30px;position: relative;left: 90px;top: 20px;" v-if="form.username===item.username  ">

        <div style="padding: 14px;margin-top: -20px;">
          <div style="font-weight: bold;font-size: 18px">

            {{item.name}}
          </div>


          <div class="bottom clearfix" style="display: flex;margin-top: 20px">
            <div style="font-size: 18px;color: red;font-weight: normal" >￥:{{item.payPrice}}</div>
            <div style="font-size: small;color: #49b1f5;margin-left: 130px;font-weight: bold" >支付时间：{{item.payTime}}</div>
            <div style="font-size: small;color: #49b1f5;margin-left: 130px;font-weight: bold" >支付人：{{item.username}}</div>
            <div style="font-size: small;color: green;margin-left: 200px" v-html="item.state===1? '已支付':'未支付'">

            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div app padless absolute>
    <div class="footer-wrap" style="margin-top: 70px">
      <div>©2021 - {{ new Date().getFullYear() }} By chenchao</div>
      <a href="https://beian.miit.gov.cn/" target="_blank">
        邮箱：2776895893@qq.com
      </a>
    </div>
  </div>
</div>
</template>

<script>
  import request from '../utils/request'
  export default {
    name:'MyBook',
    data() {
      return {
       forms:[],
        form:{}
      }
    },
    created(){
      var str=sessionStorage.getItem("user")
      this.form=JSON.parse(str)
      request.get('/order').then(res=>{
      // console.log(res)

        this.forms=res.data.records
        console.log(this.forms)
     })

    },
    methods:{

    }
  }
</script>

<style scoped>
  .footer-wrap {
    width: 100%;
    line-height: 2;
    position: relative;
    padding: 40px 20px;
    color: #eee;
    font-size: 14px;
    text-align: center;
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: Gradient 10s ease infinite;
  }

  .footer-wrap a {
    color: #eee !important;
  }

  @keyframes Gradient {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
</style>
